<template>
  <Row>
    <Col :span="3">
        <hierTree :data="current.fills" v-bind="treeAttrs" :ref="'tree'"
        @select="select"
        @add="add"
        @remove="remove"
        @menu="menu"></hierTree>
    </Col>
    <Col v-if="item" :span="21">
        <cfg-form :ref="'form'" v-bind="formAttrs" :data="item" @change="formChange"></cfg-form>
        <cfg-form :ref="'formValues'" v-bind="valuesAttrs" :data="item.values"></cfg-form>
        <Row v-if="item.values" border>
            <Col :span="3">
                <hierTree :data="item.values.stops" v-bind="stopTreeAttrs" :ref="'stopTree'"
                @select="selectStop"
                @add="addStop"
                @remove="removeStop"
                @menu="menu"></hierTree>
            </Col>
            <Col v-if="stopItem" :span="21">
                <cfg-form :ref="'stops'" v-bind="stopAttrs" :data="stopItem"></cfg-form>
            </Col>
        </Row>
    </Col>
</Row>
</template>

<script>
export default {
  name:'',
  components: {},
  data() {
    return {
        item:null,
        stopItem:null
    };
  },
  props: {
    current:{
        default:()=>{
            return {
            }
        }
    }
  },
  watch: {},
  computed: {
    treeAttrs(){
        return {
            title:{
                "en-US":'Fill List',
                "zh-CN": 'Fill List'
            }[this.G_Locale],
            rootId:null,
            nameId:'id',
            namePid:'parentId',
            nameTitle:'id',
            rootEnable:true,
            menuEnable:true,
            addEnable:true,
            removeEnable:true,
            menus:[]
        }
    },
    formAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'id',
                    title: 'id',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text'
                    }
                },
                {
                    key: 'type',
                    title: '类型',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'select',
                        options:[
                            {value:'linear',label:'线性渐变'},
                            {value:'radial',label:'径向渐变'}
                        ],
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },
    valuesAttrs(){
        if(this.item.type==='linear'){
            return this.linearAttrs;
        }else if(this.item.type==='radial'){
            return this.radialAttrs;
        }
    },
    linearAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'x1',
                    title: 'x1',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text'
                    }
                },
                {
                    key: 'y1',
                    title: 'y1',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'x2',
                    title: 'x2',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'y2',
                    title: 'y2',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },
    radialAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'cx',
                    title: 'cx',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text'
                    }
                },
                {
                    key: 'cy',
                    title: 'cy',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'fx',
                    title: 'fx',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'fy',
                    title: 'fy',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'r',
                    title: 'r',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },
    stopTreeAttrs(){
        return {
            title:{
                "en-US":'Stop List',
                "zh-CN": 'Stop List'
            }[this.G_Locale],
            rootId:null,
            nameId:'pos',
            namePid:'parentId',
            nameTitle:'pos',
            rootEnable:true,
            menuEnable:true,
            addEnable:true,
            removeEnable:true,
            menus:[]
        }
    },
    stopAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'pos',
                    title: '位置',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text'
                    }
                },
                {
                    key: 'color',
                    title: '颜色',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'color',
                    },
                },
                {
                    key: 'opacity',
                    title: '透明度',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'number',
                        min:0,
                        max:1,
                        step:0.1
                    },
                },
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },

  },
  created() {},
  mounted() {},
  methods: {
    select(item){
        this.item = item;
    },
    add(item){
        this.current.fills.push(this.linearTpl())
    },
    remove(item){
        this.current.fills.splice(this.current.fills.indexOf(item),1)
        this.item = null;
    },
    menu(menu,item){
        
    },
    selectStop(item){
        this.stopItem = item;
    },
    addStop(item){
        this.item.values.stops.push(this.stopTpl())
    },
    removeStop(item){
        this.item.values.stops.splice(this.item.values.stops.indexOf(item),1)
        this.stopItem = null;
    },
    formChange(key,value){
        if(key==='type'){
            if(value==='linear'){
                this.item.values = this.linearTpl().values;
            }
            if(value==='radial'){
                this.item.values = this.radialTpl().values;
            }
        }
    },
    setTree(fn){
      this.$refs.tree.$children[0].setTree(fn)
    },
    linearTpl(){
        return {
            id:'linear1',
            type:'linear',
            values:{
                x1:'0%',
                y1:'0%',
                x2:'100%',
                y2:'0%',
                stops:[
                    {pos:'0%',color:'gray',opacity:1},
                    {pos:'40%',color:'white',opacity:1},
                    {pos:'70%',color:'gray',opacity:1},
                    {pos:'90%',color:'white',opacity:1},
                    {pos:'100%',color:'gray',opacity:1},
                ]
            }
        }
    },
    radialTpl(){
        return {
            id:'radial1',
            type:'radial',
            values:{
                cx:'70%',
                cy:'50%',
                r:'50%',
                fx:'50%',
                fy:'50%',
                stops:[
                    {pos:'0%',color:'gray',opacity:1},
                    {pos:'40%',color:'white',opacity:1},
                    {pos:'70%',color:'gray',opacity:1},
                    {pos:'90%',color:'white',opacity:1},
                    {pos:'100%',color:'gray',opacity:1},
                ]
            }
        }
    },
    stopTpl(){
        return {
            pos:'0%',
            color:'gray',
            opacity:1
        }
    }
  }
};
</script>
<style scoped>
</style>